import moment from 'moment';
import { useContext } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { PurchaseSupplierStatisticsContext } from '../common';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Button, Card, Col, DatePicker, Form, Row, Space } from 'antd';
import DeptPosLinkageUser from '@/components/DeptPosLinkageUser';
const { RangePicker }: any = DatePicker;
const StatisticsManageViewTop = ({ searchForm }: Record<string, any>) => {
  /**
   * 解构上下文
   * */
  const { styleFixCls, changeStepType, reloadRequest } = useContext(PurchaseSupplierStatisticsContext);

  /**
   * 判断当前步长
   * */
  const isSearchStep = () => {
    const [createTimeStart, createTimeEnd] = searchForm?.getFieldValue('timeRanges');
    const oneYearRang = moment?.duration(createTimeEnd.diff(createTimeStart));
    if (oneYearRang?.asYears() > 1) {
      changeStepType('年');
    } else {
      changeStepType('月');
    }
  };

  return (
    <div className={styleFixCls + 'SearchBox'}>
      <Card title={'统计条件'}>
        <div style={{ padding: '0px' }} className={pageStyles['fromView-styles']}>
          <Form form={searchForm}>
            <Row gutter={[8, 8]}>
              <Col span={6}>
                <DeptPosLinkageUser
                  formRef={searchForm}
                  colSpan={24}
                  isNO_label={false}
                  org_label={'申请部门/单位'}
                  user_label="员工"
                  orgamParams={{ params: 0, flowType: 'null' }}
                  isNO_search={true}
                  notUser={false}
                  isDeptRequired={false}
                  isUserRequired={false}
                  isNo_selectCompany={false}
                  isNO_selectDepartment={true}
                  isNo_selectPosition={false}
                  formCompanyID="companyID"
                  formDepartmentID="departmentID"
                  formPositionID="positionID"
                  formUserID="userID"
                  isNO_showPosition={false}
                  // isNo_orgSelectChecks={true}
                  // isNo_userSelectChecks={true}
                />
              </Col>
              <Col span={6}>
                <Form.Item name="timeRanges" initialValue={[moment().startOf('year'), moment().endOf('year')]}>
                  <RangePicker
                    style={{ width: '100%' }}
                    format="YYYY-MM-DD"
                    placeholder={['开始日期', '结束日期']}
                    ranges={{
                      本年: [moment().startOf('year'), moment().endOf('year')],
                      近三年: [moment().subtract(3, 'years').startOf('year'), moment().endOf('year')],
                      近五年: [moment().subtract(5, 'years').startOf('year'), moment().endOf('year')],
                    }}
                    onChange={isSearchStep}
                    allowClear={false}
                  />
                </Form.Item>
              </Col>
              <Col span={12} className={styleFixCls + 'SearchBox-colRightBox'}>
                <Space>
                  <Button
                    type="primary"
                    icon={<SearchOutlined />}
                    onClick={() => {
                      const { departmentID, timeRanges } = searchForm?.getFieldsValue();
                      let [stateTime, endTime] = timeRanges;
                      stateTime = moment(stateTime)?.format('YYYY-MM-DD 00:00:00');
                      endTime = moment(endTime)?.format('YYYY-MM-DD 23:59:59');
                      reloadRequest({ stateTime, endTime, departmentID });
                    }}
                  >
                    查询
                  </Button>
                  <Button
                    icon={<ReloadOutlined />}
                    onClick={() => {
                      searchForm?.resetFields();
                      const { timeRanges } = searchForm?.getFieldsValue();
                      let [stateTime, endTime] = timeRanges;
                      stateTime = moment(stateTime)?.format('YYYY-MM-DD 00:00:00');
                      endTime = moment(endTime)?.format('YYYY-MM-DD 23:59:59');
                      reloadRequest({ stateTime, endTime });
                    }}
                  >
                    重置
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </Card>
    </div>
  );
};

export { StatisticsManageViewTop };
